<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>健康资料</title>
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@2.4/lib/index.css">
    <link rel="stylesheet" href="/css/global.css">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vant@2.4/lib/vant.min.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="https://cdn.bootcss.com/qs/6.5.2/qs.min.js"></script>

</head>
<body>
<div class="bg"></div>
<div id="app">
    <van-row>
        <van-col span="24">
            <van-nav-bar
                    title="健康资料"
                    left-text="返回"
                    left-arrow
                    @click-left="onClickLeft"></van-nav-bar>
        </van-col>
        <van-col span="24">
            <div class="box m-4 p-3">
                <div class="text-center color-main mb-3">
                    <van-icon name="column" size="40"></van-icon>
                </div>
                <div>
                    <van-cell-group>
                        <!--                        <van-cell title="性别" value="男" ></van-cell>-->
                        <!--                        <p th:text="${pHealthData.length}"></p>-->

                        <!--<van-cell id="lenght" name="length" title="身高" value="${pHealthData.length}"  th:aaa="${pHealthData.length}" th:text="${pHealthData.length}"  is-link @click="updateCell($event)" v-model="lenght"> {{length}}</van-cell>
                       <van-cell id="age" title="年龄" value="${pHealthData.age}" th:aaa="${pHealthData.age}"  th:text="${pHealthData.age}" is-link @click="updateCell($event)" v-model="age"></van-cell>-->
                        <!--                        <van-cell id="newWeight"  title="初始体重" value="${pHealthData.newWeight}"  th:aaa="${pHealthData.newWeight}" th:text="${pHealthData.newWeight}" is-link @click="updateCell($event)" v-model="newWeight" ></van-cell>-->
                        <!--                        <van-cell id="targetWeight"  title="目标体重" value="${pHealthData.targetWeight}" th:aaa="${pHealthData.targetWeight}"  th:text="${pHealthData.targetWeight}" is-link @click="updateCell($event)" v-model="targetWeight"></van-cell>-->
                        <!--                        <van-cell  id="starttime" title="开始时间" value="${starttime!'f'}"  th:aaa="${startdate}" th:text="${startdate}" is-link @click="updateCell($event)" v-model="startdate"></van-cell>-->
                        <!--                        <van-cell  id="endtime" title="目标达成时间" value="${endtime!'f'}"  th:aaa="${enddate}" th:text="${enddate}" is-link @click="updateCell($event)" v-model="enddate"></van-cell>&ndash;&gt;-->

                        <van-cell v-model="health.height" id="height" th:aaa="${pHealthData.length}" name="height"
                                  th:text="${pHealthData.length}" title="身高" is-link
                                  @click="updateCell($event)"></van-cell>
                        <van-cell id="age" title="年龄" th:aaa="${pHealthData.age}" th:text="${pHealthData.age}" is-link
                                  @click="updateCell($event)" v-model="health.age"></van-cell>
                        <van-cell id="newWeight" th:aaa="${pHealthData.newWeight}" name="newWeight" title="初始体重"
                                  th:text="${pHealthData.newWeight}" is-link @click="updateCell($event)"
                                  v-model="health.newWeight"></van-cell>
                        <van-cell id="targetWeight" th:aaa="${pHealthData.targetWeight}" name="targetWeight"
                                  title="目标体重" th:text="${pHealthData.targetWeight}" is-link @click="updateCell($event)"
                                  v-model="health.targetWeight"></van-cell>
                        <van-cell id="starttime" th:aaa="${startdate}" name="starttime" title="开始时间"
                                  th:text="${startdate}" is-link @click="showCalendar($event)"
                                  v-model="health.startTime"></van-cell>
                        <van-cell id="endtime" th:aaa="${enddate}" name="endtime" title="目标达成时间" th:text="${enddate}"
                                  is-link @click="showCalendar($event)" v-model="health.endTime"></van-cell>
                    </van-cell-group>
                </div>
            </div>
        </van-col>
        <van-popup
                v-model="show"
                closeable
                position="bottom"
                :style="{ height: '30%' ,width:'100%'}"
        >
            <div style="margin: 50px 20px 20px 20px">
                        <textarea id="textare" class="w-100 p-3 border bg-f9 mb-3" style="box-sizing: border-box"
                                  placeholder="请输入相关信息" v-model="cellcontent"></textarea>
                <van-button type="primary" block @click="certain()">确认修改</van-button>
            </div>
        </van-popup>
        <van-popup
                lazy-render="true"
                v-model="show2"
                position="bottom"
                :style="{ height: '40%' }">
            <van-datetime-picker
                    v-model="currentDate"
                    type="date"
                    title="选择年月日"
                    :min-date="minDate"
                    :max-date="maxDate"
                    :formatter="formatter"
                    @cancel="show2=false"
                    @confirm="onConfirmDate"
            ></van-datetime-picker>
        </van-popup>
        <van-col span="24">
            <div class="m-4 d-flex">
                <div class="w-100 pr-2">
                    <van-button square color="linear-gradient(to right, #4bb0ff, #6149f6)" block
                                @click="updateHealthData">修改健康资料
                    </van-button>
                </div>
            </div>
        </van-col>
    </van-row>
</div>
</body>
<script>
    new Vue({
        el: '#app',
        data() {
            return {
                value: ' sd',
                health: {
                    height: '',
                    age: '',
                    weight: '',
                    targetWeitht: '',
                    startTime: '',
                    endTime: ''
                },
                show: false,
                show2: false,
                isLoadingShow: true,
                cellid: 'a',
                cellcontent: 'a',
                minDate: new Date(2000, 0, 1),
                maxDate: new Date(2100, 0, 1),
                currentDate: new Date(),
                year: "",
                month: "",
                day: "",
            };
        },
        methods: {
            updateCell(a) {

                this.health.height = 33;
                //后台传来的元素a
                console.log("this height is" + this.health.height);
                console.log("cellid=" + this.cellid + "cellcontent=" + this.cellcontent);
                //得到元素从后台thymeleaf传来的值，存在aaa属性中
                var name = a.currentTarget.getAttribute("aaa");
                console.log("name is " + name);
                this.show = true;
                //把和输入框绑定的content设置为元素的值，把data的id设置为元素的id
                this.cellcontent = name;
                this.cellid = a.currentTarget.id;
                console.log("cellid=" + this.cellid + "this.cellcontent=" + this.cellcontent);
                // document.getElementById("textare").setAttribute("vanname",a.currentTarget.getAttribute("id"));
            },

            certain() {
                this.health.height = "23444";
                var idd = '';
                console.log("newWeight element span is" + document.getElementById("newWeight").children[1].innerHTML);
                switch (this.cellid) {
                    case  "height":
                        document.getElementById("height").children[1].innerText = this.cellcontent;
                        break;
                    case  "age":
                        document.getElementById("age").children[1].innerHTML = this.cellcontent;
                        break;
                    case  "newWeight":
                        document.getElementById("newWeight").children[1].innerHTML = this.cellcontent;
                        break;
                    case  "targetWeight":
                        document.getElementById("targetWeight").children[1].innerHTML = this.cellcontent;
                        break;
                }
                //用户修改完输入框后，通过cellid得到元素在用content改
                console.log("cellid=" + this.cellid + "cellcontent=" + this.cellcontent);
                // this.{{this.cellid}} = this.cellcontent;

                document.getElementById(this.cellid).text = this.cellcontent;

                this.show = false;
            },
            formatter(type, value) {
                if (type === 'year') {
                    return `${value}年`;
                } else if (type === 'month') {
                    return `${value}月`;
                } else if (type === 'day') {
                    return `${value}日`;
                }
                return value;
            },
            onConfirmDate(val) {
                console.log("now is on ConfirmDate");
                this.year = val.getFullYear();
                console.log("this.year  is" + this.year);
                console.log("this month is" + this.month);
                console.log("this day is" + this.day);
                this.month = val.getMonth() + 1;
                this.day = val.getDate();
                console.log(this.year + this.day);
                if (this.month >= 1 && this.month <= 9) {
                    this.month = '0' + this.month;
                }
                if (this.day >= 1 && this.day <= 9) {
                    this.day = '0' + this.day
                }
                // this.className = 'timeClass';
                document.getElementById(this.cellid).children[1].innerHTML = this.year + "-" + this.month + "-" + this.day;
                this.show2 = false;
            },
            showCalendar(a) {
                console.log("the current time is " + this.currentDate);

                // setTimeout(() => {
                //     this.isLoadingShow = false
                // }, 500);
                var name = a.currentTarget.getAttribute("name");
                this.cellid = name;
                console.log("id is :" + this.cellid);
                if (name == "starttime") {
                    this.currentDate = new Date(a.currentTarget.children[1].innerHTML);
                    console.log(this.currentDate);
                } else {
                    this.currentDate = new Date(a.currentTarget.children[1].innerHTML);
                }
                console.log("this selected date is" + this.currentDate);
                this.show2 = true;
                this.isLoadingShow = true;
            },
            updateHealthData() {
                // var data=new FormData;
                // data.append('length',this.length);
                // axios({
                //     url:"/personUser/updateHealthData",
                //     method:'post',
                //     headers: {
                //         'Content-Type':'application/json'
                //     },
                //     params:{
                //        length: this.length,
                //         newWeight: this.newWeight,
                //         target: this.target,
                //         starttime: this.starttime,
                //         endtime: this.endtime,
                //         targetWeight: this.targetWeight,
                //         age: this.age
                //     }
                // })
                // let data = {
                //     height: document.getElementById("height").children[1].innerHTML,
                //             newWeight: document.getElementById("newWeight").children[1].innerHTML,
                //             target: document.getElementById("target").children[1].innerHTML,
                //             starttime: document.getElementById("starttime").children[1].innerHTML,
                //             endtime: document.getElementById("endtime").children[1].innerHTML,
                //             targetWeight: document.getElementById("targetWeight").children[1].innerHTML,
                //             age: document.getElementById("age").children[1].innerHTML
                // }
                let data = {
                    length: document.getElementById("height").children[1].innerHTML,
                    newWeight: document.getElementById("newWeight").children[1].innerHTML,
                    starttime: document.getElementById("starttime").children[1].innerHTML,
                    endtime: document.getElementById("endtime").children[1].innerHTML,
                    targetWeight: document.getElementById("targetWeight").children[1].innerHTML,
                    age: document.getElementById("age").children[1].innerHTML
                }
                axios.post(`/personUser/updateHealthData`, data)
                    .then(res = > {
                    console.log('res=>', res);
                alert(res.data.toString());
            })
                ;
                // axios.post('/personUser/updateHealthData', Qs.stringify({

                //     .then(function (response) {
                //         console.log(response);
                //     })
                //     .catch(function (error) {
                //         console.log(error);
                //     });
                // }))
                //     axios.post(
                //     'personUser/updateHealthData',  params: {

                //     }
                // )
                // console.log("this is the health data");
            },
            onClickLeft() {
                window.location.href = "../jumpto/toPersonalCenter";
                Toast('返回');
            },
        },
    });

</script>
</html>